<template>
  <div class="tableContainer">
    <el-table
      v-if="!refreshTable"
      :data="data"
      ref="jsbosTable"
      class="jsbos-common-table"
      :height="height"
      :element-loading-text="$t('common.loadingText')"
      v-bind="$attrs"
      v-on="$listeners"
      :border="border"
      :size="tableSize"
    >
      <el-table-column
        prop="selection"
        type="selection"
        width="50"
        v-if="hasC"
        align="center"
      />
      <el-table-column
        prop="index"
        type="index"
        width="50"
        label="序号"
        v-if="hasNO"
        align="center"
        fixed="left"
      />
      <table-column
        :columns="columns"
        :columnList="columnList"
        v-if="customColumn || isHeader"
      />
      <template v-else>
        <slot />
      </template>
      <template slot="empty">
        <el-empty description="暂无数据" :image-size="120"></el-empty>
      </template>
    </el-table>
    <table-column-settings
      v-if="drawerVisible"
      ref="TableColumnSettings"
      :defaultColumns="defaultColumns"
      :columnList="columnList"
      @setColumn="setColumn"
    />
  </div>
</template>

<script>
import TableColumn from "./table-column";
import TableColumnSettings from "./table-column-settings";
export default {
  name: "jsbos-table",
  components: { TableColumn, TableColumnSettings },
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    // 序号 默认有
    hasNO: {
      type: Boolean,
      default: true,
    },
    // 多选框 默认无
    hasC: {
      type: Boolean,
      default: false,
    },
    border: {
      type: Boolean,
      default: false,
    },
    customColumn: {
      type: Boolean,
      default: true,
    },
    isHeader: {
      type: Boolean,
      default: false,
    },
    height: {
      default: "100%",
    },
    size: {
      type: String,
      default: "small",
    },
  },
  data() {
    return {
      columnList: [],
      hasSlotContent: false,
      columns: [],
      defaultColumns: [],
      drawerVisible: false,
      refreshTable: false,
      tableSize: "small",
    };
  },
  watch: {
    data: {
      handler(val) {
        if (!val) return;
        this.doLayout();
      },
      deep: true,
    },
    // "$store.state.settings.tableSize": {
    //   deep: true,
    //   handler(newVal, oldVal) {
    //     this.size = newVal;
    //     this.$nextTick(() => {
    //       this.settingSize();
    //       this.$refs.jsbosTable.doLayout();
    //     });
    //   },
    // },
  },
  computed: {
    menuId() {
      return this.$route.meta.modelId || "";
    },
    // size() {
    //   return this.$store.state.settings.tableSize;
    // },
  },
  created() {
    this.tableSize = this.size;
  },
  mounted() {
    this.getColumns();
    // this.size = this.$store.state.settings.tableSize;

    this.$nextTick(() => {
      this.settingSize(this.size);
      this.$refs.jsbosTable.doLayout();
    });
  },
  beforeUpdate() {
    this.getColumns();
  },
  updated() {
    if (this.refreshTable) this.refreshTable = false;
  },
  methods: {
    settingSize(size) {
      console.log(size, "----");
      this.tableSize = size;
      let that = this;
      if (size == "medium") {
        setTimeout(function () {
          let parent = document.getElementsByClassName("el-table--medium")[0];
          console.log(parent);
          let tdChild = parent.querySelectorAll("td");
          let thChild = parent.querySelectorAll("th");
          thChild.forEach((item) => {
            item.style.height = "60px";
            item.style.fontSize = "16px";
            item.style.boxSizing = "border-box";
            item.style.padding = "0px";
          });
          tdChild.forEach((item) => {
            item.style.height = "60px";
            item.style.fontSize = "16px";
            item.style.boxSizing = "border-box";
            item.style.padding = "0px";
          });
          that.doLayout();
        }, 0);
      } else if (size == "mini") {
        setTimeout(function () {
          let parent = document.getElementsByClassName("el-table--mini")[0];
          console.log(parent);
          let tdChild = parent.querySelectorAll("td");
          let thChild = parent.querySelectorAll("th");
          thChild.forEach((item) => {
            item.style.height = "40px";
            item.style.fontSize = "12px";
            item.style.boxSizing = "border-box";
            item.style.padding = "0px";
          });
          tdChild.forEach((item) => {
            item.style.height = "40px";
            item.style.fontSize = "12px";
            item.style.boxSizing = "border-box";
            item.style.padding = "0px";
          });
          that.doLayout();
        }, 0);
      } else if (size == "small") {
        setTimeout(function () {
          let parent = document.getElementsByClassName("el-table--small")[0];
          console.log(parent);
          let tdChild = parent.querySelectorAll("td");
          let thChild = parent.querySelectorAll("th");
          thChild.forEach((item) => {
            item.style.height = "50px";
            item.style.fontSize = "14px";
            item.style.boxSizing = "border-box";
            item.style.padding = "0px";
          });
          tdChild.forEach((item) => {
            item.style.height = "50px";
            item.style.fontSize = "14px";
            item.style.boxSizing = "border-box";
            item.style.padding = "0px";
          });
          that.doLayout();
        }, 0);
      }
    },
    showDrawer() {
      this.drawerVisible = true;
      this.$nextTick(() => {
        this.$refs.TableColumnSettings.init(this.columnList, this.columns);
      });
    },
    checkForSlotContent() {
      let checkForContent = (hasContent, node) => {
        return hasContent || node.tag || (node.text && node.text.trim());
      };
      return (
        this.$slots &&
        this.$slots.default &&
        this.$slots.default.reduce(checkForContent, false)
      );
    },
    getColumns() {
      if (!this.customColumn && !this.isHeader) return;
      this.hasSlotContent = this.checkForSlotContent();
      if (!this.hasSlotContent) return;
      this.columns = this.$slots.default;
      let defaultColumns = this.columns
        .map((o) => o.componentOptions && o.componentOptions.propsData)
        .filter((item) => item);
      this.defaultColumns = defaultColumns.filter((o) => o.prop);
      let list = [...this.defaultColumns];
      const cacheList = this.jsbos.storageGet(this.menuId);
      if (!cacheList) {
        this.columnList = list.map((item) => {
          return {
            ...item,
            columnVisible: true,
          };
        });
      } else {
        let columnList = cacheList
          .map((item) => {
            let isShow = false;
            list.forEach((item2) => {
              if (item.prop === item2.prop) isShow = true;
            });
            return isShow ? item : null;
          })
          .filter((item) => item);
        this.columnList = this.mergeArray(columnList, list);
      }
    },
    mergeArray(arr1, arr2) {
      let arr = [...arr1];
      for (let i = 0; i < arr2.length; i++) {
        let flag = true;
        inner: for (let j = 0; j < arr1.length; j++) {
          if (arr2[i].prop == arr1[j].prop) {
            flag = false;
            break inner;
          }
        }
        if (flag) arr.push(arr2[i]);
      }
      return arr;
    },
    doLayout() {
      // setTimeout(() => {
      // this.settingSize();
      this.$nextTick(() => {
        this.$refs && this.$refs.jsbosTable && this.$refs.jsbosTable.doLayout();
      });
      // }, 0);
      console.log(this.data, "=======");
    },
    setColumn(list) {
      // this.loading = true
      this.jsbos.storageSet({ [this.menuId]: list });
      this.columnList = list;
      this.$forceUpdate();
      this.refreshTable = true;
    },
  },
};
</script>
<style lang="scss">
.tableContainer {
  flex: 1 0 0;
  height: 100%;
  overflow: hidden;
}

.elDialog {
  margin: 0 !important;
  width: 240px !important;
}

.elDialog .el-dialog__header {
  padding: 0;
}

.elDialog .el-dialog__body {
  padding: 0;
}

.elDialog .el-dialog__footer {
  padding: 0;
}

.column-list {
  height: calc(100% - 46px);
  padding: 0;

  .column-item-header {
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    font-size: 14px;
    color: #999;
    border-bottom: 1px solid #d9d9d9;
  }

  .column-item {
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    font-size: 14px;
    color: #303133;
    cursor: pointer;

    &:hover {
      background: #f2f4f6;
    }

    &.sortable-chosen {
      border: 1px dashed #1890ff;
    }
  }

  .column-item-icon {
    width: 14px;
    margin-right: 5px;
    color: #909399;
    cursor: move;
  }

  .el-switch {
    transform: scale(0.8);
  }

  .column-item-label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    flex: 1 0 0;
  }

  .column-item-value {
    flex: 1 0 0;
    text-align: right;
  }
}
</style>
